<template>
  <div class="home">
    <!-- 最上方收藏和信息栏 -->
    <div class="ahead">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <!-- 左侧 -->
            <div class="index_left">
              <span @click="setAsHomePage">设为首页</span>
              <span @click="addToFavorites">收藏本页</span>
            </div>
            <!-- 右侧 -->
            <div class="index_right">
              <div>
                <el-dropdown>
                  <el-avatar
                    :size="32"
                    :src="circleUrl"
                    class="rotate-animation"
                    style="margin-right: 20px; cursor: pointer"
                    @mouseenter="showDropdown"
                  ></el-avatar>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>diy设置</el-dropdown-item>
                    <el-dropdown-item>角色ID</el-dropdown-item>
                    <el-dropdown-item @click.native="logout"
                      >退出登录</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <!-- 时间 -->
              <div>
                <span>{{ currentTime }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- logo -->
      <!-- 搜索框 -->
    </div>
    <!-- index内容 -->
    <!-- 导航栏 -->
    <div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#f7f9f9"
        text-color="#333"
        active-text-color="#0Ac2ce"
        active-background-color="red"
      >
        <el-menu-item index="1" style="margin-left: 50px">主页</el-menu-item>
        <el-menu-item index="2">消息中心</el-menu-item>
      </el-menu>
    </div>
    <div style="margin-top: 30px">
      <el-main>
        <!-- 面包屑导航 -->
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          style="margin-bottom: 20px"
        >
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/about' }">233</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 主页内容 -->
        <!-- 轮播 -->
        <el-carousel height="280px" style="width: 500px">
          <!-- 第一张图 -->
          <el-carousel-item>
            <el-image :src="url" :fit="fit"></el-image>
          </el-carousel-item>
          <!-- 第二张图 -->
          <el-carousel-item>
            <el-image :src="url" :fit="fit"></el-image>
          </el-carousel-item>
          <!-- 第三张图 -->
          <el-carousel-item>
            <el-image :src="url" :fit="fit"></el-image>
          </el-carousel-item>
          <!-- 第四张图 -->
          <el-carousel-item>
            <el-image :src="url" :fit="fit"></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-main>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.updateTime();
    setInterval(this.updateTime, 1000); // 每秒钟更新一次
  },
  data() {
    return {
      activeIndex: "1",
      roleId: "12345", // 替换成具体的角色ID
      circleUrl:
        "https://gd-hbimg.huaban.com/f4a5464952dbc80047f6b5cb7e3006ab70c5749b94d5e-ReReen_fw480webp", //头像地址
      dropdownVisible: false, // 下拉框显示状态
      activeIndex: "1", //导航栏选择
      currentTime: "",
      url: "https://p.sda1.dev/12/4a9ab629cbf8aa0e0322f5a980224c80/2.jpg",
    };
  },
  methods: {
    updateTime() {
      const date = new Date();
      this.currentTime = date.toLocaleTimeString();
    },
    showDropdown() {
      this.dropdownVisible = true; // 显示下拉框
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    addToFavorites() {
      // 处理收藏本页逻辑
      console.log("收藏了");
    },
    setAsHomePage() {
      // 处理设为首页逻辑
      console.log("设为了");
    },
    logout() {
      // 处理退出登录逻辑
      this.$router.push("/");
    },
  },
};
</script>
<style scoped>
.el-breadcrumb__separator {
  color: red !important;
}

.el-main {
  width: calc(100vw - 100px);
  margin: auto;
  /* height: 1000px; */
  background-color: rgba(222, 222, 222, 0.5);
  border-radius: 10px;
}

/* 轮播样式 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 3px solid #409eff !important;
  color: #409eff !important;
  font-weight: 700 !important;
}

/* 设置选中el-menu-item时的状态 */
.el-menu-item:hover {
  color: #ff6fa2 !important;
}

.ahead {
  height: 210px;
}

.rotate-animation {
  transition: transform 0.5s;
}

.rotate-animation:hover {
  transform: rotate(360deg);
}

.index_left span {
  margin: 0 10px;
  cursor: pointer;
}

.index_right {
  height: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  color: white;
  align-items: center;
}

.bg-purple-dark {
  width: calc(100vw - 100px);
}

.grid-content {
  border-radius: 4px;
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  margin: auto;
  align-items: center;
}
</style>